<template>
  <div>
    <div class="product">
      <div class="product-top">
        <div class="left">
          <el-button size="small" @click="toAdd" type="primary" >+添加新产品</el-button>
          <el-button size="small" @click="$refs.dialogImport.init()" >产品导入</el-button>
          <el-button size="small" @click="deleteRow">批量删除</el-button>
        </div>
        <b class="search-roll">
          <input type="text" placeholder="输入商品名称搜索相关商品" class="search" v-model="searchVal"
                 @keyup.enter="search">
          <i class="el-icon-search" @click="search" ></i>
        </b>
      </div>
      <!-- 产品列表-->
      <ProductListMine ref="productList"
                   @showDrawer="showDrawer" @emptySearch="searchVal=''">
      </ProductListMine>
    </div>
    <DialogImport ref="dialogImport"></DialogImport>
  </div>
</template>

<script>
    import {mapGetters} from "vuex";
    import ProductListMine from '@/components/product/ListMine'
    import DialogImport from '@/components/product/DialogImport'
    import {verification} from '@/util/util'
    export default {
        components: {
            ProductListMine,DialogImport
        },
        data() {
            return {
                loading:false,
                dialogVisible: false,
                productList: [],
                searchVal: '',
                id: ''
            }
        },
        computed: {
            ...mapGetters(["permission"]),
        },
        methods: {
            showDrawer() { // 展示右侧产品详情
                this.dialogVisible = true;
            },
            search() {//搜索
                this.loading=true;
                if (verification(this.searchVal)) {
                    this.$message({
                        message: '请勿输入特殊字符',
                        type: 'success'
                    });
                    return;
                }
                this.$refs.productList.init({currentPage: 1, searchVal: this.searchVal})
            },
            deleteRow() {//删除
                this.$refs.productList.remove()
            },
            toAdd() { // 添加新产品
                this.$router.push({
                    path: '/product/add',
                    query:{
                        type:1
                    }
                })
            },
            toDetails(form) { // 跳转到编辑详情
                this.$router.push({path: `/product/details/${form.id}`})
            }
        },
    }
</script>

<style lang="scss" scoped>
  @import "@/styles/product.scss";
</style>

